<template>
  <div>
    <el-dialog :visible="exportVis" @close="handleCloseExport" :title="exportDiaTitle" width="600px">
      <el-form ref="formRef" :rules="formRules" :model="formData" :label-width="labelWidth">
        <!-- 1.版本选择 -->
        <el-form-item label="版本选择：" prop="version" v-if="formItemControl.includes(1)">
          <el-select size="mini" style="width: 80%" v-model="formData.version">
            <el-option v-for="item in versionOptions" :label="item.label" :value="item.value" :key="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 2.中心编号 -->
        <el-form-item label="中心编号：" prop="coreNum" v-if="formItemControl.includes(2)">
          <el-select size="mini" style="width: 80%" v-model="formData.coreIds"></el-select>
        </el-form-item>
        <!-- 3.类型 -->
        <el-form-item label="类型：" prop="typeRadio" v-if="formItemControl.includes(3)">
          <el-radio-group v-model="formData.typeRadio">
            <el-row>
              <el-col :span="12"> <el-radio :label="0" disabled>空白病例报告表(全册)</el-radio></el-col>
              <el-col :span="12"> <el-radio :label="1">空白病例报告表(单一册)</el-radio></el-col>
              <el-col :span="12"> <el-radio :label="2" disabled>注释病例报告表(全册)</el-radio></el-col>
              <el-col :span="12"> <el-radio :label="3" disabled>注释病例报告表(单一册)</el-radio></el-col>
            </el-row>
          </el-radio-group>
        </el-form-item>
        <!-- 5.受试者代码 -->
        <el-form-item label="受试者代码：" prop="centerNum" v-if="formItemControl.includes(5)">
          <el-select size="mini" style="width: 80%" v-model="formData.subCodes"></el-select>
        </el-form-item>
        <!-- 6.受试者状态 -->
        <el-form-item label="受试者状态：" prop="subjectState" v-if="formItemControl.includes(6)">
          <el-select size="mini" style="width: 80%" v-model="formData.subStatuses"></el-select>
        </el-form-item>
        <!-- 4.目录 -->
        <el-form-item label="目录：" prop="catalogueRadio" v-if="formItemControl.includes(4)">
          <el-radio-group v-model="formData.catalogueRadio">
            <el-radio label="0" disabled>临时</el-radio>
            <el-radio label="1">永久</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 13.分组变量 -->
        <el-form-item label="分组变量：" prop="groupingVariable" v-if="formItemControl.includes(13)">
          <el-select size="mini" style="width: 80%" v-model="formData.groupingVariable"> </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleTimingExport" size="mini">定时导出</el-button>
        <el-button type="primary" @click="handleExport" size="mini">导出</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  props: {
    exportVis: {
      type: Boolean,
      default: false,
    },
    formItemControl: {
      type: Array,
      default: () => [],
    },
    exportDiaTitle: {
      type: String,
      default: '',
    },
    exportData: {
      type: Object,
    }
  },
  data() {
    return {
      formData: {
        version: '',
        coreNum: '',
        typeRadio: '',
        catalogueRadio: '1',
      },
      formRules: {
        version: [{ required: true, message: '请填写', trigger: 'blur' }],
        typeRadio: [{ required: true, message: '请填写', trigger: 'blur' }],
      },
      projectId: '',
      projectDatabaseId: '',
      versionOptions: [],
      coreNumOptions: [],
      subjectStateOptions: [],
    }
  },
  created() {
    this.projectId = localStorage.getItem('sys-project-id') || ''
    this.projectDatabaseId = localStorage.getItem('project-database-Id') || ''
  },
  watch: {
    exportVis: {
      handler(val) {
        if (val) {
          if (this.formItemControl.includes(2)) {
            this.getCenterListData()
          }
          if (this.formItemControl.includes(1)) {
            this.getVersionListData()
          }
          if (this.formItemControl.includes(6)) {
            this.getSubjectStatusData()
          }
        }
      },
    },
  },
  methods: {
    ...mapActions('centralManagement', ['getCentralListAPI', 'getDatabaseVersionListAPI']),
    ...mapActions('subjectStatus', ['qryProjectSubjectStatusList']),
    // 6. 受试者状态
    async getSubjectStatusData() {
      const params = {
        projectId: this.projectId,
      }
      const res = await this.qryProjectSubjectStatusList({ params })
      this.subjectStateOptions = res.data
    },
    // 1. 获取版本选择
    async getVersionListData() {
      const params = {
        projectId: this.projectId,
        projectDatabaseId: this.projectDatabaseId,
      }
      const res = await this.getDatabaseVersionListAPI({ params })
      this.versionOptions = res.data.map(item => ({
        label: item.useVersion + '(' + item.databaseNum + ')',
        value: item.id,
      }))
    },
    // 2.获取中心列表
    async getCenterListData() {
      const params = {
        projectId: this.projectId,
        projectDatabaseId: this.projectDatabaseId,
      }
      const res = await this.getCentralListAPI({ params })
      this.coreNumOptions = res.data
    },
    // 点击关闭
    handleCloseExport() {
      this.$emit('handleCloseExport')
      this.$refs.formRef.resetFields()
    },
    // 点击定时导出
    handleTimingExport() {
      return this.$message.warning('功能开发中')
    },
    // 点击导出
    async handleExport() {
      try {
        this.$message.warning('功能开发中~')
        await this.$refs.formRef.validate()
        this.$emit('handleCloseExport')
      } catch {
        this.$message.warning('请填写完成！')
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
